<template>
  <div class="">
    <div class="s-main" v-if="userTags.length">
      <div class="sm-tip flex">
        <div class="s-l flex">
          <div class="sf-l" :class="[showExpand ? 'ovh' : 'ovs']">
            <div ref="sfl">
              <el-button
                v-for="item in userTags"
                :key="item.name"
                type="primary"
                size="small"
                round
                :class="[selecttag == item.name ? 'active' : '']"
                @click="handleClick(item)"
                >{{ item.name }}</el-button
              >
            </div>
          </div>
          <div class="sf-r" v-show="showExpandBtn">
            <el-button
              v-if="showExpand"
              type="text"
              @click="handleExpand('down')"
              >展开全部<i class="el-icon-arrow-down"></i
            ></el-button>
            <el-button v-else type="text" @click="handleExpand('up')"
              >收起全部<i class="el-icon-arrow-up"></i
            ></el-button>
          </div>
        </div>
        <div class="s-r">
          <el-button size="small" type="primary" round plain @click="showManage"
            >订阅管理</el-button
          >
        </div>
      </div>
      <div class="sm-con" v-if="List.length">
        <div class="flex" v-for="item in List" :key="item.id">
          <img class="img" src="@/assets/img/personal/bookmark.svg" alt="" />
          <p class="flex-auto ellipsis-1" @click="gotoDetail(item)">
            <el-tooltip
              :content="`${item.text}...`"
              placement="top"
              popper-class="tooltip_width"
            >
              <span>{{ item.title }}</span>
            </el-tooltip>
          </p>
          <p class="date">{{ item.pubdate }}</p>
        </div>
        <el-pagination
          background
          hide-on-single-page
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
          :current-page.sync="searchInfo.ipi"
        >
        </el-pagination>
      </div>
      <div class="no-data" v-else>
        <p>暂无数据！</p>
      </div>
    </div>
    <div class="no-date flex" v-else>
      <img src="@/assets/img/personal/book.png" alt="" />
      <el-button type="primary" round @click="showManage"
        >去订阅感兴趣的标签</el-button
      >
    </div>
    <!-- 订阅标签管理 -->
    <el-dialog
      title="订阅标签管理"
      :visible.sync="trueOrFalse"
      append-to-body
      :close-on-click-modal="false"
      width="900px"
    >
      <SubscribeLabel :tagsInfo="tagsInfo" @close="handleClose" />
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {},
      selecttag: "",
      searchInfo: {
        selecttag: [],
        ipi: 1,
        ips: 10,
        order: 0,
      },
      total: 0,
      List: [],
      showExpandBtn: false,
      showExpand: true,
      trueOrFalse: false,
      tagsInfo: {},
      userTags: [],
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("homeUserInfo"));
    this.getSubscribeTags();
  },
  methods: {
    //
    showManage() {
      this.trueOrFalse = true;
    },
    handleExpand(type) {
      this.showExpand = !this.showExpand;
    },
    handleCurrentChange(val) {
      // console.log("val1", val);
      this.searchInfo.ipi = val;
      this.search();
    },
    getSubscribeTags() {
      this.$post(this.$Url.personal.getSubscribeTags, {
        userId: this.userInfo.id,
        goTagFlag: true,
      }).then((res) => {
        const data = res.data;
        this.userTags = (data.popularTagsObj.userPopularTags || []).concat(
          data.mediaTagsObj.userMediaTags || []
        );
        if (this.userTags.length) {
          this.search();
          this.$nextTick(() => {
            let height = this.$refs.sfl.offsetHeight;
            // console.log("height", height);
            if (height > 60) {
              this.showExpandBtn = true;
            } else {
              this.showExpandBtn = false;
            }
          });
        }
        this.tagsInfo = data;
      });
    },
    handleClick(item) {
      this.selecttag = item.name;
      this.searchInfo.selecttag = item;
      this.search();
    },
    handleClose(type) {
      this.trueOrFalse = false;
      if (type) {
        this.getSubscribeTags();
      }
    },
    search() {
      this.searchInfo.userId = this.userInfo.id;
      this.$post(this.$Url.personal.getSubscribeList, this.searchInfo).then(
        (res) => {
          const data = res.data;
          this.total = data.total;
          this.List = data.result;
        }
      );
    },
    gotoDetail(item) {
      this.$nextTick(() => {
        let routerUrl = this.$router.resolve({
          name: "ConsultDetail",
          query: {
            id: item.id,
          },
        });
        window.open(routerUrl.href, "_blank");
      });
    },
  },
  components: {
    //
    SubscribeLabel: () => import("./subscribeLabel.vue"),
  },
};
</script>
<style lang="scss" scoped>
.el-button--primary {
    color: #FFF;
    background-color: $mainColor;
    border-color: $mainColor;
}
.no-date {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
  img {
    width: 180px;
  }
}
.sm-con {
  margin: 20px 0;
  .flex {
    margin-bottom: 20px;
  }
  .flex-auto {
    cursor: pointer;
  }
  .img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  .date {
    width: 150px;
  }
}
.sm-tip {
  margin-top: 20px;
  justify-content: space-between;
  .sf-l {
    margin-right: 20px;
    .el-button {
      margin: 0 20px 20px 0;
    }
    .active {
      background-color: $color120;
      border-color: $color120;
    }
  }
  .el-icon-arrow-up {
    color: $mainColor;
  }
  .ovh {
    height: 51px;
    overflow: hidden;
  }
  .s-r {
    margin: 0 20px;
  }
}
</style>
<style>
.tooltip_width {
  max-width: 400px;
}
</style>
